<template>
    <div>
        <TableLayout form-title="">
            <div class="table-title">
                <el-button @click="addClass">添加班级信息</el-button>
            </div> 
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
        
                <el-table-column label="学校" align="center">
                    <template scope="scope">
                        <span>{{scope.row.school | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="年级" align="center">
                    <template scope="scope">
                        <span>{{scope.row.grade | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="班级编号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.classNum | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column label="班级名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.className | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="荣誉" align="center">
                    <template scope="scope">
                        <span>{{scope.row.honor | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="职务" align="center">
                    <template scope="scope">
                        <span>{{scope.row.business | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="120px">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>                  
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageQuery.total"
                    :current-page.sync="pageQuery.currentpage"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
       
        <!-- 添加班级 -->
        <add-class :addClassData='addClassData' @search="queryData" v-if="addClassData.dialogFormVisible"></add-class> 

        <!-- 编辑 -->
        <edit-class :editClassData='editClassData' @search="queryData" ></edit-class>

    </div>
</template>

<script>
    import TableLayout from 'components/TableLayout';
    import addClass from './addClass';
    import editClass from './editClass';
    import { getStudentInfo } from 'api/studentMange';
    import { mapState, mapActions, mapGetters } from 'vuex';

    export default {
        components: { TableLayout, addClass, editClass },
        data() {
            return {
                addClassData: {
                    dialogFormVisible: false,
                    studentId: ''
                },
                editClassData: {
                    dialogState: false,
                    classId: '',
                    studentId: '',
                    honor: '',
                    business: ''
                },
                loading: true,  
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'uid'
            ])
        },
        mounted() {
            $('.form-box').hide();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            addClass(obj) {
                this.addClassData.studentId = this.$route.params.studentId;
                this.addClassData.dialogFormVisible = true;
            },
            edit(obj) {
                this.editClassData.dialogState = true;
                this.editClassData.classId = obj.classId;
                this.editClassData.studentId = this.$route.params.studentId;
                this.editClassData.honor = obj.honor;
                this.editClassData.business = obj.business;
            },
            queryData() {

                let studentId = this.$route.params.studentId;

                getStudentInfo(this.pageQuery.currentpage, this.config.pageSize, studentId).then(response => {
                    this.loading = false;
                    this.tableData = [];
                    if (response.data.content) {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                    }
                }).catch(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>